<template>
    <div class="h-100 w-100">
    <div style="height: 80px">
      <tablleBar
        @submit-swich="swichTable"
        :list=list
      ></tablleBar>
    </div>
    <div style="height: calc(100% - 80px)">
    <CustomTableVue
        :showLabel="false"
        :field-list="fieldList"
        :table-data="tableData"
        height="85%"
      >
      </CustomTableVue>
    </div>
  </div>
 
</template>

<script lang="ts" setup>
import CustomTableVue from "@/components/common/table/CustomTable.vue";
import tablleBar from "@/components/project/tablleBar.vue";
const list=['全部(150)','暴雪(20)','暴雨(30)','冰冻(20)','冰雹(15)','冻雨(10)']
const fieldList: any = [
    {
      name: "number",
      label: "序号",
      type: "TEXT",
      width:'80'
    },
    {
      name: "time",
      label: "报警时间",
      type: "TEXT",
        width:'150'
    },
    {
      name: "type",
      label: "报警类型",
      type: "TEXT",
       width:'150'
    },
    {
      name: "message",
      label: "预警信息",
      type: "TEXT",
    
    }
];

const tableData = ref([]);
const props = defineProps({
  selectValue: {
    type: String,
    default: '0'
  },
});
const jsonData: any = inject("jsonData");
const current = computed(() => {
  let data = [];
  try {
    const obj = jsonData.value.yjzy.yjxx
    if(props.selectValue){
        data = obj[props.selectValue];

    }else{
        Object.values(obj).forEach((arr: any) => {
            data.push(...arr)
        })
    }
  } catch (error) {}

  return data;
});

watch(
  () => current.value,
  (val) => {
    if (val) {
     tableData.value = val
     
    }else{
        tableData.value = []
    }
  }
);
const activeItem = ref(0);
const swichTable = (item: any) => {
  // activeItem.value = item;
  // if (activeItem.value == 0) {
  //   option.series[0].data = yData
  //   option.yAxis.axisLabel.formatter = "{value}"+'米'

  // } else {
  //   option.series[0].data = yData1
  //   option.yAxis.axisLabel.formatter = "{value}"+'%'
  // }
  // myChart.setOption(option);
};
</script>
